<template>
  <div class="all-404">
    <div class="left-404">
      <img src="../assets/imgs/404.png" alt="404" />

      <div class="right-404">
        <h1>404</h1>
        <p>抱歉，页面出错！</p>
        <el-button type="primary" @click="linkTo">
          {{ num }}秒后跳转至首页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 9,
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.num--
      if (this.num === 0) {
        this.$router.push('/')
        clearInterval(this.timer)
      }
    }, 1000)
  },
  methods: {
    linkTo() {
      this.$router.push('/')
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="less" scoped>
.all-404 {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .left-404 {
    width: 620px;
    height: 100%;
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h1 {
      color: #333333;
    }
    p {
      color: #666666;
    }
  }
}
</style>
